<template>
  <div class="home">
    <v-Head></v-Head>
    <!-- 公告信息 -->
    <div class="postMessage">
      <div class="postMessage-left">
        <i class="fa fa-volume-up"></i>
        <span>最新消息</span>
      </div>
      <div class="postMessage-right">
        <span>·{{ oneData.title }}</span>
        <span>·{{ oneData.content }}</span>
        <span>·{{ oneData.createtime.substring(0, 10) }} {{ Number(oneData.createtime.substring(11, 13)) + 8 }}
          {{ oneData.createtime.substring(13, 19) }}
          <span @click="handleGgxx">更多</span>
        </span>
      </div>
    </div>
    <!-- 内容 -->
    <div class="main">
      <div class="main-header">
        <div class="main-header-box">
          <span class="iconfont">&#xe740;</span>
          <div>
            <p>{{ sum.user }}</p>
            <p>系统用户数</p>
          </div>
        </div>
        <div class="main-header-box">
          <span class="iconfont">&#xe61a;</span>
          <div>
            <p>{{ sum.cost }}</p>
            <p>计费订单数量
            </p>
          </div>
        </div>
        <div class="main-header-box">
          <span class="iconfont">&#xe6be;</span>
          <div>
            <p>{{ sum.parking }}</p>
            <p>车位总量</p>
          </div>
        </div>
        <div class="main-header-box">
          <span class="iconfont">&#xe625;</span>
          <div>
            <p>{{ sum.poster }}</p>
            <p>用户反馈数量</p>
          </div>
        </div>

      </div>
      <div class="main-content">
        <div class="main-content-box">
          <div id="xiaoqu"></div>
        </div>
        <div class="main-content-box">
          <div id="chewei"></div>
        </div>
        <div class="main-content-box">
          <div id="dianfei"></div>
        </div>
      </div>
      <div class="main-foot">
        <div class="main-foot-left">
          <div id="yhfw"></div>
        </div>
        <div class="main-foot-right">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="repaircontent" show-overflow-tooltip label="维修内容">
            </el-table-column>
            <el-table-column prop="createtime" label="报修时间" width="180px">
              <!-- 插槽 -->
              <template slot-scope="scope">
                {{ scope.row.createtime.substring(0, 10) }} {{ Number(scope.row.createtime.substring(11, 13)) + 8 }}
                {{ scope.row.createtime.substring(13, 19) }}
              </template>
            </el-table-column>
            <el-table-column prop="resultstatus" label="状态">
              <template slot-scope="scope">
                <el-button type="success" round v-if="scope.row.resultstatus == 1">已修复</el-button>
                <el-button type="warning" round v-else>待处理</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <el-pagination @current-change="handleCurrentChange" :current-page="iPagination.currentPage" 
            layout="prev, pager, next" :total="iPagination.total" :page-size="iPagination.pageSize">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vHead from "../components/header"
export default {
  name: "index",
  components: {
    vHead
  },
  data() {
    return {
      iPagination: {
        // 默认选中哪一页
        currentPage: 1,
        // 默认定义每页多少条
        pageSize: 4,
        // 定义总条数
        total: null,
      },
      // 维修数据
      tableData: [],
      // 更多信息
      gdxx: {
        data: "",
        total: ""
      },
      // 更多信息一组数据
      oneData: {
        createtime: "",
        content: "",
        title:"",
      },
      // 总数量
      sum: {
        // 用户总人数
        user: "",
        cost: "",
        parking: "",
        poster: "",
      },
      // 图表数据
      echartData: {
        A: "1",
        B: "1",
        C: "1",
        D: "1",
        // 车位数
        park: {
          A: "1",
          B: "1",
          C: "1",
          D: "1",
          parkstatus: {
            A: "1",
            B: "1",
            C: "1",
            D: "1",
          },
          orderstatus: {
            A: "1",
            B: "1",
            C: "1",
            D: "1",
          },
        },
        cost: {
          df: "1",
          sfgd: "1",
          sfal: "1",
          trq: "1",
          wyf: "1",
          kdf: "1",
        },
        users: {
          // "00":"","01":"","02":"","03":"","04":"","05":"","06":"","07":"","08":"","09":"","10":"","11":"","12":"","13":"","14":"","15":"","16":"","17":"","18":"","19":"","20":"","21":"","22":"","23":"","24":"","25":"","26":"","27":"","28":"","29":"","30":"","31":""
        },
        sumArr: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      },
      // repair:{
      //   resultstatus:"",
      //   createtime:"",
      //   repaircontent:""
      // }


    }
  },
  methods: {
    handleGgxx(){
      this.$router.push("/service/postMessage")
    },
    // 小区饼图图
    handleEchartXq() {
      this.$nextTick(() => {
        // 1 全局初始化echarts实例 ----获取dom元素
        let myChart = this.$echarts.init(document.getElementById('xiaoqu'));
        // 2 配置图表内容和数据  --设置内容
        let option = {
          toolbox: {
            show: true,
            // orient: 'vertical',
            left: 'right',
            top: 'top',
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          title: {
            text: '小区分布统计',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '小区分布',
              type: 'pie',
              color: [
                '#d8ecff', '#b0f5aa', '#339dff', '#f5de6c'
              ],
              radius: '66%',
              top: 20,
              data: [
                { value: this.echartData.A, name: 'A区' },
                { value: this.echartData.B, name: 'B区' },
                { value: this.echartData.C, name: 'C区' },
                { value: this.echartData.D, name: 'D区' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        // 3 绘制图表 ---将图表放到dom元素中
        myChart.setOption(option)
        // 4 图标的响应式
        // 第一步容器必须宽度的单位是%
        // 第二步当窗口发生改变的时候使用.resize()方法去适配
        window.onresize = () => {
          myChart.resize()
        }
        // console.log(this.echartData.A);
      })
    },
    // 车位柱状图
    handleEchartCw() {
      // 1 全局初始化echarts实例 ----获取dom元素
      let myChart = this.$echarts.init(document.getElementById('chewei'));
      // 2 配置图表内容和数据  --设置内容
      let option = {
        title: {
          text: "车位数/已分配量/已缴费",
          left: 'left'
        },
        color: [
          '#5470c6', '#91cc75', '#ddb7fa'
        ],
        legend: {
          data: ['车位数', '已分配量', '已缴费'],
          left: 'right'
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: ['A区车位', 'B区车位', 'C区车位', 'D区车位']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '车位数',
            type: 'bar',
            barGap: 0,
            label: {
              show: true,
              position: 'top'
            },
            emphasis: {
              focus: 'series'
            },
            data: [this.echartData.park.A, this.echartData.park.B, this.echartData.park.C, this.echartData.park.D]
          },
          {
            name: '已分配量',
            type: 'bar',
            label: {
              show: true,
              position: 'top'
            },
            emphasis: {
              focus: 'series'
            },
            data: [this.echartData.park.parkstatus.A, this.echartData.park.parkstatus.B, this.echartData.park.parkstatus.C, this.echartData.park.parkstatus.D]
          },
          {
            name: '已缴费',
            type: 'bar',
            label: {
              show: true,
              position: 'top'
            },
            emphasis: {
              focus: 'series'
            },
            data: [this.echartData.park.orderstatus.A, this.echartData.park.orderstatus.B, this.echartData.park.orderstatus.C, this.echartData.park.orderstatus.D]
          },
        ]
      };
      // 3 绘制图表 ---将图表放到dom元素中
      myChart.setOption(option)
      // 4 图标的响应式
      // 第一步容器必须宽度的单位是%
      // 第二步当窗口发生改变的时候使用.resize()方法去适配
      window.onresize = () => {
        myChart.resize()
      }
    },
    // 电费雷达图
    handleEchartDf() {
      // 1 全局初始化echarts实例 ----获取dom元素
      let myChart = this.$echarts.init(document.getElementById('dianfei'));
      // 2 配置图表内容和数据  --设置内容
      let option = {
        legend: {
          //   top: 10,
          left: "left",
          //   itemBorderRadius: 8,
          data: [
            "计费项目"
          ],
        },
        color: ['#31C2FF'],
        backgroundColor: '#fff',
        title: {
          text: "缴费项目订单",
          top: 10,
          left: "right",
          textStyle: {
            fontSize: 18,
            fontWeight: 600,
          },
        },
        textStyle: {
          // 全局字体样式
          color: '#333',
          fontSize: 14,
        },
        radar: {
          // shape: 'circle',
          splitNumber: 5,
          grid: {
            top: '10%',
            left: '10%',
            right: '10%',
            bottom: '10%',
            containLabel: true,
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: '#ffeef3',
            },
          },
          splitLine: {
            lineStyle: {
              color: ['#333'],
            },
          },
          axisLine: {
            lineStyle: {
              color: '#333',
            },
          },
          indicator: [
            {
              name: '电费单',
              max: 10,
            },
            {
              name: '水费固定月单',
              max: 10,
            },
            {
              name: '水费按量单',
              max: 10,
            },
            {
              name: '天然气单',
              max: 10,
            },
            {
              name: '物业费单',
              max: 10,
            },
            {
              name: '宽带费单',
              max: 10,
            },
          ],
        },
        series: [
          {
            name: '雷达图',
            type: 'radar',
            symbol: 'circle', //none为不显示
            areaStyle: {
              color: ['#31C2FF'], // 调色盘颜色列表。
              opacity: 0.4,
            },
            itemStyle: {
              lineStyle: {
                width: 2,
              },
            },
            emphasis: {
              areaStyle: {
                // opacity: 0.8,
              },
            },
            label: {
              show: true, // 显示标签
              fontSize: 14,
              color: '#31C2FF',
            },
            data: [
              {
                value: [this.echartData.cost.df, this.echartData.cost.sfgd, this.echartData.cost.sfal, this.echartData.cost.trq, this.echartData.cost.wyf, this.echartData.cost.kdf],
                name: "计费项目"
              },
            ],
          },
        ],
      }

      // 3 绘制图表 ---将图表放到dom元素中
      myChart.setOption(option)
      // 4 图标的响应式
      // 第一步容器必须宽度的单位是%
      // 第二步当窗口发生改变的时候使用.resize()方法去适配
      window.onresize = () => {
        myChart.resize()
      }
    },
    // 当月用户访问情况折线图图
    handleEchartFw() {
      // 1 全局初始化echarts实例 ----获取dom元素
      let myChart = this.$echarts.init(document.getElementById('yhfw'));
      // 2 配置图表内容和数据  --设置内容
      let option = {
        color: ["#19d4ae"],
        title: {
          text: '当月用户访问情况'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['用户访问量']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          show: true,
          feature: {
            color: ["#19d4ae"],
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {},
            dataZoom: {
              yAxisIndex: 'none'
            },
          },
          iconStyle: {
            // 图形描边颜色
            borderColor: ["#19d4ae"],
          }

        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '用户访问量',
            type: 'line',
            stack: 'Total',
            data: [this.echartData.sumArr[0], this.echartData.sumArr[1], this.echartData.sumArr[2], this.echartData.sumArr[3], this.echartData.sumArr[4], this.echartData.sumArr[5], this.echartData.sumArr[6], this.echartData.sumArr[7], this.echartData.sumArr[8], this.echartData.sumArr[9], this.echartData.sumArr[10], this.echartData.sumArr[11], this.echartData.sumArr[12], this.echartData.sumArr[13], this.echartData.sumArr[14], this.echartData.sumArr[15], this.echartData.sumArr[16], this.echartData.sumArr[17], this.echartData.sumArr[18], this.echartData.sumArr[19], this.echartData.sumArr[20], this.echartData.sumArr[21], this.echartData.sumArr[22], this.echartData.sumArr[23], this.echartData.sumArr[24], this.echartData.sumArr[25], this.echartData.sumArr[26], this.echartData.sumArr[27], this.echartData.sumArr[28], this.echartData.sumArr[29], this.echartData.sumArr[30], this.echartData.sumArr[31],]
          },

        ]
      };

      // 3 绘制图表 ---将图表放到dom元素中
      myChart.setOption(option)
      // 4 图标的响应式
      // 第一步容器必须宽度的单位是%
      // 第二步当窗口发生改变的时候使用.resize()方法去适配
      window.onresize = () => {
        myChart.resize()
      }
    },


    // 更多信息
    handleGdxx() {
      this.$Axios({
        url: '/poster/getPosterData',
        method: 'get',
        data: {
          currPage: 0,
          pageNum: 100,
        },
        success: (result) => {
          this.gdxx.data = result.data
          this.gdxx.total = result.total;
        }
      })
    },
    // 更多信息跳动
    handleGdxxLb() {
      let i = 0
      var a = setInterval(() => {
        this.oneData = this.gdxx.data[i]
        i++
        // console.log(i, this.oneData);
      }, 1000)
      if (i >= 99) {
        clearInterval(a)
        i = i
      }
    },

    // 统计总数量
    handleSum() {
      // 用户总人数
      this.$Axios({
        url: '/users/getUsersData',
        method: 'get',
        data: {
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          this.sum.user = result.total;
        }
      })
      // 计费订单总数量
      this.$Axios({
        url: '/cost/getPayMessage',
        method: 'get',
        data: {
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          this.sum.cost = result.total;
        }
      })
      // 车位总数量
      this.$Axios({
        url: '/parking/getParkOrder',
        method: 'get',
        data: {
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          this.sum.parking = result.total;
        }
      })
      // 用户反馈总数量
      this.$Axios({
        url: '/poster/getFeedBack',
        method: 'get',
        data: {
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          this.sum.poster = result.total;
        }
      })
    },

    // 小区饼图数据
    handleEchartXqData() {
      this.$Axios({
        url: '/house/searchList',
        method: 'get',
        data: {
          unitname: "A",
          currPage: 1,
          pageNum: 4,
        },
        success: (result) => {
          this.echartData.A = result.total;
          // console.log(this.echartData.A);
        }
      })
      this.$Axios({
        url: '/house/searchList',
        method: 'get',
        data: {
          unitname: "B",
          currPage: 1,
          pageNum: 4,
        },
        success: (result) => {
          this.echartData.B = result.total;
        }
      })
      this.$Axios({
        url: '/house/searchList',
        method: 'get',
        data: {
          unitname: "C",
          currPage: 1,
          pageNum: 4,
        },
        success: (result) => {
          this.echartData.C = result.total;
        }
      })
      this.$Axios({
        url: '/house/searchList',
        method: 'get',
        data: {
          unitname: "D",
          currPage: 1,
          pageNum: 4,
        },
        success: (result) => {
          this.echartData.D = result.total;
        }
      })
    },
    // 车位柱状图数据
    handleEchartCwData() {
      // 车位数
      this.$Axios({
        url: '/parking/getParkData',
        method: 'get',
        data: {
          parkname: "B",
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          this.echartData.park.B = result.total;
        }
      })
      this.$Axios({
        url: '/parking/getParkData',
        method: 'get',
        data: {
          parkname: "A",
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          this.echartData.park.A = result.total;
        }
      })
      this.$Axios({
        url: '/parking/getParkData',
        method: 'get',
        data: {
          parkname: "C",
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          this.echartData.park.C = result.total;
        }
      })
      this.$Axios({
        url: '/parking/getParkData',
        method: 'get',
        data: {
          parkname: "D",
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          this.echartData.park.D = result.total;
        }
      })
      // 已分配量
      this.$Axios({
        url: '/parking/getParkData',
        method: 'get',
        data: {
          parkname: "B",
          parkstatus: 1,
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          this.echartData.park.parkstatus.B = result.total;
        }
      })
      this.$Axios({
        url: '/parking/getParkData',
        method: 'get',
        data: {
          parkname: "A",
          parkstatus: 1,
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          this.echartData.park.parkstatus.A = result.total;
        }
      })
      this.$Axios({
        url: '/parking/getParkData',
        method: 'get',
        data: {
          parkname: "C",
          parkstatus: 1,
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          this.echartData.park.parkstatus.C = result.total;
        }
      })
      this.$Axios({
        url: '/parking/getParkData',
        method: 'get',
        data: {
          parkname: "D",
          parkstatus: 1,
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          this.echartData.park.parkstatus.D = result.total;
        }
      })
      // 已缴费
      this.$Axios({
        url: '/parking//getParkOrder',
        method: 'get',
        data: {
          parkname: "B",
          orderstatus: 1,
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          this.echartData.park.orderstatus.B = result.total;
        }
      })
      this.$Axios({
        url: '/parking//getParkOrder',
        method: 'get',
        data: {
          parkname: "A",
          orderstatus: 1,
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          this.echartData.park.orderstatus.A = result.total;
        }
      })
      this.$Axios({
        url: '/parking//getParkOrder',
        method: 'get',
        data: {
          parkname: "C",
          orderstatus: 1,
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          this.echartData.park.orderstatus.C = result.total;
        }
      })
      this.$Axios({
        url: '/parking//getParkOrder',
        method: 'get',
        data: {
          parkname: "D",
          orderstatus: 1,
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          this.echartData.park.orderstatus.D = result.total;
        }
      })
    },
    // 电费雷达图数据
    handleEchartDfData() {
      this.$Axios({
        url: '/cost/getCostData',
        method: 'get',
        data: {
          c_id: 7,
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          this.echartData.cost.df = result.total;
        }
      })
      this.$Axios({
        url: '/cost/getCostData',
        method: 'get',
        data: {
          c_id: 8,
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          this.echartData.cost.sfgd = result.total;
        }
      })
      this.$Axios({
        url: '/cost/getCostData',
        method: 'get',
        data: {
          c_id: 9,
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          this.echartData.cost.sfal = result.total;
        }
      })
      this.$Axios({
        url: '/cost/getCostData',
        method: 'get',
        data: {
          c_id: 10,
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          this.echartData.cost.trq = result.total;
        }
      })
      this.$Axios({
        url: '/cost/getCostData',
        method: 'get',
        data: {
          c_id: 11,
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          this.echartData.cost.wyf = result.total;
        }
      })
      this.$Axios({
        url: '/cost/getCostData',
        method: 'get',
        data: {
          c_id: 12,
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          this.echartData.cost.kdf = result.total;
        }
      })
    },
    // 用户访问量数据
    handleEchartYhfwData() {
      this.$Axios({
        url: '/users/getLoginMonth',
        method: 'get',
        data: {},
        success: (result) => {
          this.echartData.users = result;
          // console.log(this.echartData.users[1]);
          for (let i = 0; i < this.echartData.users.length; i++) {
            const time = this.echartData.users[i].createtime.substring(8, 10)
            // console.log(time,22);
            // console.log(11);
            const firstNum = time.substring(0, 1)
            if (firstNum == 0) {
              const secendNum = time.substring(1, 2)
              this.echartData.sumArr[secendNum] += 1
            } else {
              this.echartData.sumArr[time] += 1
            }
          }

        }
      })
    },
    // 维修
    handleWx() {
      this.$Axios({
        url: '/poster/getRepairData',
        method: 'get',
        data: {
          currPage: this.iPagination.currentPage - 1,
          pageNum: 4,
        },
        success: (result) => {
          this.iPagination.total=result.total
          this.tableData = result.data;
          // console.log(this.tableData);
        }
      })
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.iPagination.currentPage = val
      this.handleWx()
    },
  },
  mounted() {
    setTimeout(() => {
      this.handleEchartXq()
      this.handleEchartCw()
      this.handleEchartDf()
      this.handleEchartFw()
    }, 2000)
    this.handleGdxx()
    this.handleGdxxLb()
    this.handleSum()
    this.handleEchartXqData()
    this.handleEchartCwData()
    this.handleEchartDfData()
    this.handleEchartYhfwData()
    this.handleWx()
    // console.log(this.gdxx);

    // console.log(this);

  }

}
</script>

<style lang="scss" scoped>
// 引入图标库
@import "../../../assets/icon/iconfont.css";

.postMessage::v-deep {
  height: 56px;
  line-height: 56px;
  display: flex;
  // background: pink;
  color: #4995f7;
  font-weight: 600;
  font-size: 14px;

  .postMessage-left {
    margin-right: 72px;
    padding: 0 20px;
  }

  .postMessage-right {
    display: flex;
    width: 1200px;
    justify-content: space-between;

    span {
      width: 300px;

      &:nth-child(2) {
        width: 600px;
      }

      &:nth-child(3) {
        span {
          margin-left: 20px;
        }
      }
    }
  }
}

.main {
  background: #eeeeee;
  padding: 10px 15px;

  .main-header {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;

    .main-header-box {
      background: #fff;
      width: 24%;
      padding: 26px 0;
      border-radius: 8px;
      display: flex;
      justify-content: space-around;

      span {
        font-size: 60px;
      }

      div {
        p {
          &:nth-child(1) {
            font-size: 30px;
            font-weight: 600;
          }
        }
      }

    }
  }
}

.main-content {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;

  .main-content-box {
    background: #fff;
    width: 30%;
    padding: 10px 20px;
    border-radius: 6px;
    margin-right: 20px;

    &:nth-child(3) {
      margin-right: 0;
    }

    div {
      width: 100%;
      height: 260px;
    }
  }
}

.main-foot {
  display: flex;
  justify-content: space-between;

  .main-foot-left {
    width: 65%;
    background: #fff;
    padding: 10px 20px;
    border-radius: 6px;

    div {
      width: 100%;
      height: 260px;
    }
  }

  .main-foot-right {
    width: 28%;
    background: #fff;
    padding: 30px 20px;
    border-radius: 6px;
    .el-pagination {
      text-align: right;
    }
  }
}
</style>
